<template>
    
    <div>
        <div class="title">板块列表
            
            <div class="floatBtn">
                
                <popList icon="el-icon-sort"
                    link="http://quote.eastmoney.com/bk/90.++f12++.html"
                    @addToFav="addToFavFromList"
                    :url="'http://64.push2.eastmoney.com/api/qt/clist/get?pn=1&pz=1000&po=1&np=1&ut=bd1d9ddb04089700cf9c27f6f7426281&fltt=2&invt=2&fid=f3&fs=m:90+t:3+f:!50&fields=f2,f12,f14,f3&'"
                ></popList>
            </div>
        </div>
        <div class="list ">
            <el-row v-for="(item,idx) in list" :key="idx" class="mt5" :title="item.code" :class="getRateColor(item.rate)">
                
                <span class="colspanname">
                    <BKklinePic :code="item.code" :name="item.name" :fclass="getRateColor(item.rate)"></BKklinePic>
                    <!-- <a target="_blank" :href="'http://quote.eastmoney.com/bk/90.'+item.code+'.html'"  title="跳转到详情页">
                        <span class="fsize" :class="getRateColor(item.rate)">{{item.name}}</span>
                    </a> -->
                </span>
                <span class="colspan ml5">
                    <popList :code="item.code" title="查询板块内排行" fixval="100"
                        @addToFav="addToFavStock"
                        :url="'http://push2.eastmoney.com/api/qt/clist/get?pi=0&pz=1000&po=1&ut=bd1d9ddb04089700cf9c27f6f7426281&fs=b:++code++&fid=f3&fields=f1,f2,f3,f12,f13,f14,f152&'"
                    ></popList>
                </span>
                <span class="colspan">{{item.rate}}%</span>
                <span class="colspan">
                    <i class="el-icon-top black" @click="moveUp(idx)"></i>
                    <i class="el-icon-bottom black" @click="moveDown(idx)"></i>
                    <i class="el-icon-delete black" @click="delItem(idx)"></i>
                </span>
            </el-row>
        </div>
    </div>
</template>

<script>
import BKklinePic from "../chart/BKklinePic"
import popList from "../publist/popList"

export default {
    components:{
        popList,
        BKklinePic
    },
    data() {
        return {
            ranklist:[],
            bkStockRankList: [],
            timer: null
        }
    },
    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    computed:{
        list(){
            return this.cfg.bkList || [];
        }
    },

    mounted() {
        this.startTimer();
    },

    methods: {
        doQuery(){
            this.getAllDetail();
        },
        startTimer(){
            this.getAllDetail();
            this.$once('hook:beforeDestroy', () => {   
                clearTimeout(this.timer);
            })
            this.doTimer();
        },
        doTimer(){
            clearTimeout(this.timer);
            if(this.isQry()){
                this.getAllDetail();
            }
            var sleep = this.cfg.sleepTime|| this.$config.defSleepTime;
            if(sleep<1000 || isNaN(sleep)) sleep = this.$config.defSleepTime;

            this.timer = setTimeout(()=>{
                this.doTimer();
            },sleep);
        },
        addToFavStock(selitem){
            var list = this.cfg.favList;
            var tmplist = list.filter((item)=>{return item.c == selitem.f12})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var item = {
                "c":selitem.f12,"n":selitem.f14,"p":"","r":"","watch":false
                };
            list.push(item);
        },
        addToFavFromList(bkitem){
            var tmplist = this.list.filter((item)=>{return item.code == bkitem.f12})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var item ={
                code:bkitem.f12,
                name:bkitem.f14,
                rate:bkitem.f3,
            }
            this.list.push(item);
        },
        getAllDetail(){
            this.list.map((item)=>{
                this.getDetail(item);
            });
        },
        getDetail(item){
            this.$axios.get(`http://push2.eastmoney.com/api/qt/stock/trends2/get?secid=90.${item.code}&ut=fa5fd1943c7b386f172d6893dbfba10b&fields1=f1%2Cf2%2Cf3%2Cf4%2Cf5%2Cf6%2Cf7%2Cf8%2Cf9%2Cf10%2Cf11%2Cf12%2Cf13&fields2=f51%2Cf52%2Cf53%2Cf54%2Cf55%2Cf56%2Cf57%2Cf58&?`+Math.random())
            .then((res) => {
                try{
                    var data = res.data.data;
                    item.rate = 0;
                    if(!item.name){
                        item.name = data.name;
                    }
                    if(data.trends.length>0){
                        var last = data.trends[data.trends.length-1];
                        var arr = last.split(",");
                        var price = arr[2];
                        item.rate = this.getRise(price,data.prePrice);
                    }
                }catch(ex){
                    this.$message.error(ex.message);
                }
            })
        },
        delItem(idx){
            
            this.$confirm('确认要删除该记录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var item = this.list.splice(idx,1);
            });
        },
        moveUp(idx){
            if(idx==0) return;
            var item = this.list.splice(idx,1);
            this.list.splice(idx-1,0,item[0]);
        },
        moveDown(idx){
            if(idx==this.list.length-1) return;
            var item = this.list.splice(idx,1);
            this.list.splice(idx+1,0,item[0]);
        }
    }
}
</script>


<style lang="less" scope>


    .colspanmid{
        display: inline-block;
        min-width: 60px;
        text-align: right;
    }
</style>